.container {
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  padding: 5% 0;
}
.lottery {
  width: 100vmin;
  height: 100vmin;
  padding: 5%;
  position: relative;
}
#canvas{
  background-color: 
  rgb(205, 232, 247);
  clip-path: circle();
  /* drop-shadow */
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5);
}
.start {
  border-style: none;
  font-size: 18px;
  height: 50px;
  width: 120px;
  border-radius: 25px;
  background-color: green;
  /* shadow */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  color: white;
}
.start:disabled{
  background-color: gray;
}
body {
  background-color: darkkhaki;
}
.result {
  font-size: 20px;
  color: white;
  background-color: green;
  text-align: center;
  width: 80%;
  height: 60px;
  line-height: 60px;
  border-radius: 30px;
  border: 2px solid white;
}
#pointer {
  --size: 14%;
  --offset: calc((100% - var(--size)) / 2);
  width: var(--size);
  height: var(--size);
  left: var(--offset);
  top: var(--offset);
  position: absolute;
  border-radius: 50px;
  border: 2px solid white;
  background-color: rgb(8, 217, 74);
}
.line {
  position: absolute;
  top: 35%;
  height: 15%;
  width: 10%;
  background-color: white;
  left: 45%;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

@media screen and (min-width: 768px) {
  .lottery {
    width: 85vh;
    height: 85vh;
  }
  .result {
    width: 30%;
  }
  body {
    display: flex;
    justify-content: center;
  }
}
